<template>
  <div>
    <headerNav></headerNav>
    <div class="ParkCenter_details">
      <div class="policyNotice_Nav">
        <p>
          <span @click="$router.push('/')">首页</span>>
          <span @click="$router.push('/ParkCenter')">园区中心</span>>
          <span>{{ parkData.name }}</span>
        </p>
      </div>
      <div class="ParkCenter_details_top">
        <div class="ParkCenter_details_top_head">
          <h3>{{ parkData.name }}</h3>
          <div class="head_bottom">
            <div class="head_bottom_left">
              <span>简介：</span>
              <p v-html="parkData.areaCovered"></p>
            </div>
            <div class="head_bottom_right" @click="nearbyEnterprises(parkData.addr)">附近企业</div>
          </div>
        </div>
        <div class="ParkCenter_details_top_content">
          <div class="content_left">
            <span>行业分类：</span>
          </div>
          <ul class="content_content">
            <li :class="industryIndex == -1 ? 'active' : ''" @click="industryEvent(-1)">全部</li>
            <li
              v-for="(item, index) in industryData"
              :key="index"
              @click="industryEvent(index)"
              :class="industryIndex == index ? 'active' : ''"
            >{{ item }}</li>
          </ul>
        </div>
        <div class="ParkCenter_details_top_content">
          <div class="content_left">
            <span>成立时间：</span>
          </div>
          <ul class="content_content">
            <li :class="establishIndex == -1 ? 'active' : ''" @click="establishTimeSwitch(-1)">全部</li>
            <li
              v-for="(item, index) in establishData"
              :class="establishIndex == index ? 'active' : ''"
              @click="establishTimeSwitch(index)"
              :key="index"
            >{{ item }}</li>
          </ul>
        </div>
        <div class="ParkCenter_details_top_content">
          <div class="content_left">
            <span>注册资本：</span>
          </div>
          <ul class="content_content">
            <li
              :class="registeredIndex == -1 ? 'active' : ''"
              @click="registeredCapitalSwitch(-1)"
            >全部</li>
            <li
              v-for="(item, index) in registeredData"
              :key="index"
              :class="registeredIndex == index ? 'active' : ''"
              @click="registeredCapitalSwitch(index)"
            >{{ item.content }}</li>
          </ul>
        </div>
      </div>
      <div class="ParkCenter_details_title">
        <div class="ParkCenter_details_title_left">
          已为你找到
          <span>{{ enterpriseData.total }}</span>家企业
        </div>
        <div class="ParkCenter_details_title_content">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">{{ defaultSortValue }}</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="defaultSort('默认排序')">默认排序</el-dropdown-item>
                <el-dropdown-item @click.native="defaultSort('成立日期从早到晚')">成立日期从早到晚</el-dropdown-item>
                <el-dropdown-item @click.native="defaultSort('成立日期从晚到早')">成立日期从晚到早</el-dropdown-item>
                <el-dropdown-item @click.native="defaultSort('注册资本从高到低')">注册资本从高到低</el-dropdown-item>
                <el-dropdown-item @click.native="defaultSort('注册资本从低到高')">注册资本从低到高</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="search-container">
        <div class="ParkCenter_details_content">
          <div
            class="ParkCenter_details_content_content"
            v-for="(item, index) in enterpriseData.records"
            :key="index"
          >
            <div class="ParkCenter_details_content_content_top">
              <h3 @click="enterpriseDetails(item.id, item.name)">{{ item.name }}</h3>
            </div>
            <div class="ParkCenter_details_content_content_content">
              <div
                class="ParkCenter_details_content_content_content_province"
                v-if="item.legalPerson != null"
              >
                <span>法定代表人：{{ item.legalPerson }}</span>
              </div>
              <div
                class="ParkCenter_details_content_content_content_province"
                v-if="item.foundTime != null"
              >
                <span>成立时间：{{ item.foundTime }}</span>
              </div>
            </div>
            <div
              class="ParkCenter_details_content_content_bottom"
              v-if="item.address != null"
            >地址：{{ item.address }}</div>
          </div>
        </div>

        <div class="ParkCenter_details_chart">
          <div class="ParkCenter_details_chart_content">
            <h3>园区企业按荣誉数据统计分析</h3>
            <div class="ParkCenter_details_chart_content_content" ref="HonorData"></div>
          </div>
          <div class="ParkCenter_details_chart_content">
            <h3>园区企业按知识产权统计分析</h3>
            <div class="ParkCenter_details_chart_content_content" ref="intellectual"></div>
          </div>
        </div>
      </div>

      <div class="ParkCenter_details_bottom">
        <paging ref="paging_zi" v-on:CurrentPage="accept_CurrentValue"></paging>
      </div>
    </div>
    <navigation></navigation>
    <footerNav></footerNav>
  </div>
</template>

<script>
import paging from "../../components/paging.vue"; //分页
import { getCompanyInfo, commonRequest } from "../../api/api.js";

export default {
  name: "ParkCenter_details",
  components: {
    paging
  },
  head() {
    return {};
  },
  data() {
    return {
      // 当前id
      idIndex: "",
      // 当前页
      pageIndex: 1,
      // 成立时间
      establishData: [],
      // 成立时间选中
      establishIndex: -1,
      // 注册资本
      registeredData: [],
      // 注册资本选中
      registeredIndex: -1,
      // 所有企业
      enterpriseData: [],
      // 行业分类
      industryData: [],
      // 行业分类选中
      industryIndex: -1,
      // 默认排序值
      defaultSortValue: "默认排序",
      // 园区数据
      parkData: ""
    };
  },
  mounted() {
    // var that = this;
    this.idIndex = this.$route.query.id;
    this.establishTime();
    this.registeredCapital();
    this.enterpriseAll();
    // 园区详情
    commonRequest("/api/yuanQu/yuanQuInfo/getYuanQuInfo", {
      sysOrgCode: this.$route.query.id
    }).then(res => {
      this.parkData = res;
      // console.log(res);
    });
    // 企业荣誉
    commonRequest(
      "/api/yuanQu/yuanQuEnterprise/getYuanQuEnterpriseHonorAnalysis",
      {
        sysOrgCode: this.idIndex
      }
    ).then(res => {
      if (res) {
        var HonorDataLegend_data = ["企业数量", "荣誉"];
        var HonorDataOption_data = [
          { value: res.rongyuCompCnt, name: "企业数量" },
          { value: res.rongyuCnt, name: "荣誉" }
        ];
        this.HonorDatafx(
          HonorDataLegend_data,
          HonorDataOption_data,
          "HonorData"
        );
      }
    });
    // 知识产权
    commonRequest(
      "/api/yuanQu/yuanQuEnterprise/getEnterpriseIntellectualProperty",
      {
        sysOrgCode: this.idIndex
      }
    ).then(res => {
      var intellectualLegend_data = ["专利", "商标", "软著"];
      var intellectualOption_data = [
        { value: 0, name: "专利" },
        { value: 0, name: "商标" },
        { value: 0, name: "软著" }
      ];
      if (res.enterprisePatent != null) {
        intellectualOption_data[0].value = res.enterprisePatent.zhuanliCnt;
      }
      if (res.enterpriseTrademark != null) {
        intellectualOption_data[1].value = res.enterpriseTrademark.shangbiaoCnt;
      }
      if (res.enterpriseSoft != null) {
        intellectualOption_data[2].value = res.enterpriseSoft.ruanzhuCnt;
      }
      this.HonorDatafx(
        intellectualLegend_data,
        intellectualOption_data,
        "intellectual"
      );
    });
    // 行业分类
    commonRequest("/api/yuanQu/yuanQuEnterprise/getEnterpriseIndustry", {
      sysOrgCode: this.idIndex
    }).then(res => {
      this.industryData = res;
    });
  },
  methods: {
    // 跳转至附近企业
    nearbyEnterprises(value) {
      window.open(`/nearbyEnterprise?company=${value}&nf=&xztj=`, "_blank");
    },
    // 跳转至企业详情
    enterpriseDetails(id, name) {
      getCompanyInfo({ name: name }).then(res => {
        if (res.result) {
          window.open(`/enterprise/honor?id=` + res.result.companyId, "_blank");
        } else {
          console.log("企业信息不存在");
        }
      });

      //   this.$router.push({
      //     path: "/enterprise",
      //     query: {
      //       id: id,
      //       name: name,
      //     },
      //   });
    },
    // 排序
    defaultSort(value) {
      this.defaultSortValue = value;
      this.enterpriseAll();
    },
    // 行业分类选中事件
    industryEvent(index) {
      this.industryIndex = index;
      this.enterpriseAll();
    },
    // 接受当前选中页数
    accept_CurrentValue(value) {
      this.pageIndex = value;
      this.enterpriseAll();
      var scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      var gdcs = (scrolltop - 442) / 20;
      var cs = 0;
      var tiemr = setInterval(function() {
        cs = cs + 1;
        if (cs < 20) {
          document.documentElement.scrollTop = document.body.scrollTop =
            scrolltop - gdcs * (cs + 1);
        } else {
          clearInterval(tiemr);
        }
      }, 20);
    },
    // 成立时间
    establishTime() {
      var that = this;
      commonRequest("/api/yuanQu/yuanQuEnterprise/queryEnterpriseFoundYears", {
        sysOrgCode: that.idIndex
      }).then(res => {
        that.establishData = res;
      });
    },
    // 注册资本
    registeredCapital() {
      var that = this;
      commonRequest(
        "/api/yuanQu/yuanQuEnterprise/getEnterpriseRegisteredCapitals"
      ).then(res => {
        that.registeredData = res;
      });
    },
    // 成立时间切换
    establishTimeSwitch(index) {
      this.establishIndex = index;
      this.enterpriseAll();
    },
    // 注册资本切换
    registeredCapitalSwitch(index) {
      this.registeredIndex = index;
      this.enterpriseAll();
    },
    // 获取所有企业
    enterpriseAll() {
      var that = this;
      var yearsValue = "";
      var startValue = "";
      var endValue = "";
      var industryValue = "";
      var sortStatusValue = "";
      var areaCoveredValue = "";
      var existCompsValue = "";
      if (that.defaultSortValue == "默认排序") {
        sortStatusValue = "";
        areaCoveredValue = "";
        existCompsValue = "";
      }
      if (that.defaultSortValue == "成立日期从早到晚") {
        sortStatusValue = "0";
        areaCoveredValue = "";
        existCompsValue = "2019-09-01";
      }
      if (that.defaultSortValue == "成立日期从晚到早") {
        sortStatusValue = "1";
        areaCoveredValue = "";
        existCompsValue = "2019-09-01";
      }
      if (that.defaultSortValue == "注册资本从高到低") {
        sortStatusValue = "1";
        areaCoveredValue = "123";
        existCompsValue = "";
      }
      if (that.defaultSortValue == "注册资本从低到高") {
        sortStatusValue = "0";
        areaCoveredValue = "123";
        existCompsValue = "";
      }
      if (that.industryIndex != -1) {
        industryValue = that.industryData[that.industryIndex];
      }
      if (that.establishIndex != -1) {
        yearsValue = that.establishData[that.establishIndex];
      }
      if (that.registeredIndex != -1) {
        startValue = that.registeredData[that.registeredIndex].startValue;
        endValue = that.registeredData[that.registeredIndex].endValue;
      }
      commonRequest("/api/yuanQu/yuanQuEnterprise/list", {
        sysOrgCode: that.idIndex,
        years: yearsValue,
        registeredCapitalsStartValue: startValue,
        registeredCapitalsEndValue: endValue,
        pageNo: that.pageIndex,
        industry: industryValue,
        sortStatus: sortStatusValue,
        registeredCapital: areaCoveredValue,
        foundTime: existCompsValue
      }).then(res => {
        that.enterpriseData = res;
        that.$refs.paging_zi.totalValue(res.total);
      });
    },
    // 园区企业按荣誉数据统计分析
    HonorDatafx(legend_data, option_data, id) {
      var that = this;
      var option = {
        color: ["#1f73f0", "#43c6c3", "#1ca8ec"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "horizontal",
          bottom: "0",
          data: legend_data
        },
        series: [
          {
            name: "统计分析",
            type: "pie",
            radius: ["50%", "80%"],
            bottom: "20",
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: option_data
          }
        ]
      };
      var myChart = echarts.init(that.$refs[`${id}`]);
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.ParkCenter_details {
  width: 1200px;
  margin: 0px auto;
  overflow: hidden;

  .ParkCenter_details_top {
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(238, 238, 238) -1px 3px 6px;

    .ParkCenter_details_top_head {
      padding: 30px 20px;
      border-bottom: 1px solid #f2faff;

      h3 {
        font-size: 20px;
        color: #333333;
      }

      .head_bottom {
        margin-top: 13px;
        overflow: hidden;

        .head_bottom_left {
          max-width: 1080px;
          float: left;
          margin-right: 20px;
          font-size: 14px;
          color: #999;

          span {
            float: left;
            color: #999;
            font-size: 14px;
          }

          & > p {
            margin-left: 42px;
          }
        }

        .head_bottom_right {
          float: left;
          color: #44a2ff;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }

    .ParkCenter_details_top_content {
      padding: 18px 20px 12px 20px;
      border-bottom: 1px solid #f2faff;
      overflow: hidden;

      .content_left {
        float: left;

        span {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
      }

      .content_content {
        margin-left: 82px;
        overflow: hidden;

        li {
          float: left;
          font-size: 14px;
          padding: 2px 6px;
          color: rgb(51, 51, 51);
          margin: 0px 25px 6px;
          cursor: pointer;
          position: relative;
          border-radius: 4px;

          &:hover {
            background-color: rgb(68, 162, 255);
            color: rgb(255, 255, 255);
          }
        }

        .active {
          background-color: rgb(68, 162, 255);
          color: rgb(255, 255, 255);
          border-radius: 4px;
        }
      }
    }
  }

  .ParkCenter_details_title {
    padding: 25px 0;
    overflow: hidden;

    .ParkCenter_details_title_left {
      float: left;
      line-height: 30px;
      font-size: 14px;
      color: #333;

      span {
        color: #44a2ff;
        font-size: 14px;
      }
    }

    .ParkCenter_details_title_content {
      float: left;
      margin-left: 20px;

      span {
        display: inline-block;
        padding: 0 4px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #daeaf5;
        font-size: 14px;
        color: #44a2ff;
        border-radius: 4px;
        cursor: pointer;
        box-sizing: border-box;
      }
    }
  }

  .search-container {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .ParkCenter_details_content {
    // float: left;
    // display: inline-block;
    // vertical-align: top;
    width: 850px;

    .ParkCenter_details_content_content {
      padding: 18px 20px;
      border-bottom: 1px solid #daeaf5;
      transition: all 0.2s;

      &:hover {
        background-color: rgb(255, 255, 255);
        box-shadow: rgb(238, 238, 238) -1px 3px 6px;
      }

      .ParkCenter_details_content_content_top {
        margin-bottom: 10px;

        h3 {
          font-size: 18px;
          color: #333;
          font-weight: 700;
          cursor: pointer;
        }
      }

      .ParkCenter_details_content_content_content {
        overflow: hidden;

        .ParkCenter_details_content_content_content_province {
          float: left;
          margin-right: 40px;

          span {
            font-size: 14px;
            color: #999999;
          }
        }
      }

      .ParkCenter_details_content_content_bottom {
        margin-top: 6px;
        font-size: 14px;
        color: #999999;
      }
    }
  }

  .ParkCenter_details_chart {
    width: 320px;
    // margin-left: 30px;
    // display: inline-block;
    // vertical-align: top;
    // overflow: hidden;

    .ParkCenter_details_chart_content {
      background-color: #fff;
      padding-bottom: 15px;
      margin-bottom: 40px;

      h3 {
        padding: 30px 0;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        color: #333;
      }

      .ParkCenter_details_chart_content_content {
        width: 100%;
        height: 210px;
      }
    }
  }

  .ParkCenter_details_bottom {
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 0 20px;
    text-align: right;
  }
}
</style>
